<template>
	<div class="trackquery">
		<div id="container" class="map">
		</div>
		 <el-button type="primary" @click="startAnimation" style="margin-left: 47%;margin-top: 10px;">{{$t("wel.table.Track_animation")}}</el-button>
	</div>
</template>

<script lang="ts">
	//import { Vue,Component } from "vue-property-decorator";
	//import {Params} from '@/types/Interface';
	import request from '@/router/axios';
	const AMap = window.AMap;
	import {
		baseUrl
	} from '@/config/env';
	export default {
		props: {
		   id: {
		     type: Number,
		     default: 0
		   }
		 },
		//声明map对象
		data() {
			return {
				map: {},
				marker: {},
				zoom: 17,
				markerArr: [],
				lineArr: [],
			}
		},
			
		
		//绘制车辆轨迹

		mounted() {
			console.log("DOM加载完成")
			this.getList();
			
		},
		methods: {
			
			getList() {
				let that = this;
				request({
						headers: {
							'Content-Type': 'application/json;charset=utf-8'
						},
						method: 'post',
						url: baseUrl + '/api/address/getList',
						data: {id:that.id,
						pageSize:1000,
						page:0
						}
					})
					.then(function(response) {
						console.log(response);
						if (response.data.status == 0) {
							that.$message.error(response.data.info);
						} else if (response.data.status == 1) {
							if(response.data.data.data.length>0){
								response.data.data.data.forEach(function(item,index){
									item.long= item.long.replace('N',"");
									item.lat= item.lat.replace('E',"");
									that.lineArr.push([item.long,item.lat])
								})
								that.getmap();
							}
							else{
								that.$message.error('暂无数据');
							}
						}
						
					})
					.catch(function(error) {
						console.log(error);
						that.$message.error('系统错误')
					});
					
			},
			startAnimation() {
				console.log("开始移动");
				this.marker.moveAlong(this.lineArr, 200);
			},
			openInfo() {
				console.log("打开标记");
			},

			//创建地图
			getmap() {
				console.log(AMap);
				this.map = new AMap.Map('input-card', {
					resizeEnable: true,
					zoom: 100
				});
				//操作dom渲染地图
				this.map = new AMap.Map("container", {
					resizeEnable: true,
					center: [this.lineArr[0][0], this.lineArr[0][1]],
					zoom: this.zoom
				})
				//标记车辆
				this.marker = new AMap.Marker({
					position: [this.lineArr[0][0], this.lineArr[0][1]],
					icon: "https://cloudadmin.ebyte.com/uploads/loca.png",
					offset: new AMap.Pixel(0, 0),
					autoRotation: true,
					angle: 0,
					map: this.map
				})
				var polyline = new AMap.Polyline({
					map: this.map,
					path: this.lineArr,
					showDir: true,
					strokeColor: "#28F", //线颜色
					strokeOpacity: 1, //线透明度
					strokeWeight: 6, //线宽
					strokeStyle: "solid" //线样式
				});
			},
		}

	}
</script>

<style scoped>
	.map {
		width: 100%;
		height: 500px;
	}
</style>
